/**
 * Button
 * @author: tongsitong
 */

import styled, { css } from "styled-components";
import { Button } from "antd";

const Content = ({ className, style, children, onClick, loading}) => (
  <Button className={className} style={style} onClick={onClick} loading={loading}>
    {children}
  </Button>
);

// 带红色边框的按钮
export const BorderRedBtn = styled(Content)`
  font-size: 13px;
  color: #e64a00;
  height: 28px;
  border: 1px solid #e54b19;
  border-radius: 14px;
  line-height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  background: transparent;
  padding: 0 9px;
  &:hover {
    border: 1px solid #f35c2b;
    color: #f47146;
    opacity: 0.8;
    background: transparent;
  }

  &:active {
    border: 1px solid #d34111;
    color: #e64a00;
    opacity: 1;
    background: transparent;
  }

  &:focus {
    border: 1px solid #e54b19;
    color: #e64a00;
    background: transparent;
  }
`;

// 红底按钮样式
const _redBtnActiveStyle = css`
  background-color: #e64a00;
  border-radius: 14px;
  height: 28px;
  min-width: 80px;
  font-size: 13px;
  color: #fff;
  border: none;
  font-weight: bold;

  &:hover {
    background-color: #f35c2b;
    color: #fff;
  }

  &:active {
    background-color: #d34111;
    color: #fff;
  }

  &:focus {
    background-color: #e64a00;
    color: #fff;
  }
`;

// 红底按钮disable样式
const _btnDisableStyle = css`
  background-color: #d4d7dd;
  border-radius: 14px;
  height: 28px;
  min-width: 80px;
  font-size: 13px;
  color: #fff;
  border: none;
  font-weight: bold;

  &:hover {
    background-color: #d4d7dd;
    cursor: not-allowed;
    color: #fff;
  }

  &:active {
    background-color: #d4d7dd;
    color: #fff;
  }

  &:focus {
    background-color: #d4d7dd;
    color: #fff;
  }
`;

const _getRedBtnStyle = (props) => {
  return props.disabled ? _btnDisableStyle : _redBtnActiveStyle;
};

// 红底白字的按钮
export const RedBtn = styled(Content)`
  ${_getRedBtnStyle}
`;

// 带图标的按钮样式
const TableOptBtnWrapper = styled.div`
  display: inline-block;
  img {
    position: relative;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    top: -1px;
  }
  text {
    font-size: 13px;
    color: ${(props) => (props.disabled ? "rgba(74,87,116,0.4)" : "#1f51a4")};
    line-height: 28px;
  }
  span {
    color: #1F51A4;
  }
  &:hover {
    cursor: ${(props) => (props.disabled ? "no-drop" : "pointer")};
  }
`;

// 带图标的按钮
export const TableOptBtn = (props) => {
  const {
    style,
    className,
    img,
    text,
    textStyle,
    onClick,
    disabled,
    imgStyle,
    loading
  } = props;
  return (
    <TableOptBtnWrapper
      style={style}
      className={className}
      disabled={disabled}
      onClick={disabled ? null : onClick}
      loading={loading}
    >
      {img && <img style={imgStyle} src={img} alt={text} />}
      <span style={textStyle}>{text}</span>
    </TableOptBtnWrapper>
  );
};
